<template>
  <div class="box">
    <div class="mine-header">
      <!-- 设置 -->
      <router-link to="/mine/set" class="mine-set"><img src="@/assets/images/mine-set.png" alt=""></router-link>
      <!-- 签到 -->
      <div class="mine-sign-in" @click="doSignIn()">
         <img src="@/assets/images/mine-sign-in.png" alt="">
         <span v-show="signIn==1">已签到</span>
         <span v-show="signIn==0">未签到</span>
      </div>
      <!-- 头像 -->
      <div class="mine-photo">
          <img :src="photo" alt="">
      </div>
      <!-- 昵称 -->
      <div class="mine-nickname">
        <p>{{nickname}}</p>
         <!-- 认证 -->
        <img v-show="certification==1" src="@/assets/images/mine-certification-active.png" alt="">
        <img v-show="certification==0" src="@/assets/images/mine-certification.png" alt="">
      </div>
      <!-- 云币 -->
      <div class="mine-cloud-coin">
        <img src="@/assets/images/mine-cloud-coin.png" alt="">
        {{cloudCoin}}
      </div>
    </div>
    <!-- 我的订单 -->
    <div class="mine-order pa-l-r-20">
      <p class="order-title">我的订单</p>
      <div class="mine-order-list">
        <router-link to="" class="order-list-item">
          <i v-show="toPayNum>0">{{toPayNum>9?'···':toPayNum}}</i>
          <img src="@/assets/images/mine-to-pay.png" alt="">
          <p>待支付</p>
        </router-link>
         <router-link to="" class="order-list-item">
           <i v-show="havePayNum>0">{{havePayNum>9?'···':havePayNum}}</i>
          <img src="@/assets/images/mine-have-pay.png" alt="">
          <p>已支付</p>
        </router-link>
         <router-link to="" class="order-list-item">
           <i v-show="refundNum>0">{{refundNum>9?'···':refundNum}}</i>
          <img src="@/assets/images/mine-refund.png" alt="">
          <p>退款</p>
        </router-link>
        <router-link to="/mine/order" class="order-list-item">
          <img src="@/assets/images/mine-all-orders.png" alt="">
          <p>全部订单</p>
        </router-link>
      </div>
    </div>
    <!-- 我的收益 -->
    <div class="mine-earnings pa-l-r-20" v-show="certification==1">
      <router-link to="/mine/income" class="earnings-title">
        <div class="left-box">
          <img src="@/assets/images/mine-wallet.png" alt="">
          <p>我的收益</p>
          <span>{{count}}元</span>
        </div>
        <van-icon name="arrow" color="#999"/>
      </router-link>
      <div class="earnings-list">
        <router-link to="/mine/makeMoney" class="earnings-list-item">
          <img src="@/assets/images/mine-money.png" alt="">
          <p>赚钱计划</p>
        </router-link>
         <router-link to="/mine/share" class="earnings-list-item">
          <img src="@/assets/images/mine-share.png" alt="">
          <p>我的分享</p>
        </router-link>
         <router-link to="/mine/invite" class="earnings-list-item">
          <img src="@/assets/images/mine-invite.png" alt="">
          <p>我的邀请</p>
        </router-link>
         <router-link to="/mine/poster" class="earnings-list-item">
          <img src="@/assets/images/mine-poster.png" alt="">
          <p>推广海报</p>
        </router-link>
      </div>
    </div>
    <!-- 开启赚钱计划 -->
    <router-link to="/mine/makeMoney" v-show="certification==0">
      <img src="@/assets/temporary/mine-money-plan.png" alt="">
    </router-link>
    <div class="bottom-box">
      <router-link to="" class="earnings-list-item">
          <img src="@/assets/images/mine-cloud-exchange.png" alt="">
          <p>云币兑换</p>
        </router-link>
        <router-link to="" class="earnings-list-item">
          <img src="@/assets/images/mine-travel.png" alt="">
          <p>我的游记</p>
        </router-link>
        <router-link to="/mine/collection" class="earnings-list-item">
          <img src="@/assets/images/mine-collection.png" alt="">
          <p>我的收藏</p>
        </router-link>
        <router-link to="/mine/feedback" class="earnings-list-item">
          <img src="@/assets/images/mine-feedback.png" alt="">
          <p>意见反馈</p>
        </router-link>
         <router-link to="" class="earnings-list-item">
          <img src="@/assets/images/mine-service.png" alt="">
          <p>客服</p>
        </router-link>
      </div>
    <Navbar :nav="3"></Navbar>
    <!-- 签到弹窗 -->
    <div class="mine-signIn-prop" v-show="showProp==true">
      <div class="prop-content">
        <img src="@/assets/images/mine-signIn-success.png" alt="">
        <p>签到成功</p>
        <span>{{time}}</span>
        <button @click="signInSucces()">我知道了</button>
        <van-icon name="close" color="#fff" size="27" class="close" @click="signInSucces()"/>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/navbar/navbar';//导航
import photo from '@/assets/temporary/mine-photo.png';//头像
export default {
  name:'Mine',
  components: {Navbar},
  data(){
    return{
      photo:photo,
      nickname:'远方的风',
      signIn:0,// 是否签到 1 已签到   0 未签到
      certification: 1,// 是否认证 1 已认证   0 未认证
      cloudCoin:5800,//云币数量
      toPayNum:9,// 待支付数量
      havePayNum:10, // 已支付数量
      refundNum:1, // 退款数量
      count:20,// 我的收益金额
      showProp:false,// 是否显示签到弹窗
      time:"",//签到时间
      
    }
  },
  mounted(){
    this.getTime()
  },
  methods:{
    getTime(){
      let h=new Date().getHours()
      let m=new Date().getMinutes()
      let s=new Date().getSeconds()
      h>10?h:'0'+h
      m>10?h:'0'+m
      s>10?h:'0'+s
      let time=h+':'+m+':'+s
      this.time=time
    },
    doSignIn(){
      if(this.signIn==0){
        this.showProp=true
      }
    },
    signInSucces(){
      this.showProp=false
      this.signIn=1
    }
  }
}
</script>

<style lang="scss" scoped>
 @import "@/assets/css/public";
.box{
    background-color:$gray_bg;
    padding-bottom:vw(98);
}
.mine-header{
  position: relative;
  height: vw(346);
  background:url('../../assets/images/mine-bg.png') no-repeat;
  background-size:100%;
  background-color: #fff;
  .mine-set{
    position: absolute;
    top:vw(20);
    left:vw(20);
    width: vw(40);
    >img{
      width:100%;
    }
  }
  .mine-sign-in{
   position: absolute;
    top:vw(20);
    right:0;
    width:vw(140);
    height: vw(48);
    line-height: vw(48);
    border-radius:vw(24) 0 0 vw(24);
    background-color: #EDB53D;
    color: #fff;
    text-align: center;
    font-size: vw(24);
    >img{
      display: inline-block;
      width: vw(25);
      margin-right:vw(10);
    }
  }
  .mine-photo{
    position: absolute;
    top:vw(113);
    left:50%;
    transform: translateX(-50%);
    width: vw(128);
    height: vw(128);
    border-radius:50%;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
  }
  .mine-nickname{
    display: flex;
    align-items: center;
    position: absolute;
    top:vw(266);
    left:50%;
    transform: translateX(-50%);
    width:auto;
    margin-left:vw(54);
    p{
      font-size: vw(36);
      font-weight: bold;
      overflow: hidden;
      white-space: nowrap;
    }
    img{
      display: inline-block;
      vertical-align: text-bottom;
      width: vw(108);
    }
  }
  .mine-cloud-coin{
    position: absolute;
    top:vw(322);
    left:50%;
    transform: translateX(-50%);
    width: vw(138);
    height: vw(36);
    text-align: center;
    border-radius: vw(18);
    background-color: #F2F2F2;
    font-size: vw(24);
    font-weight: bold; 
    color: #FF6600;
    line-height: vw(36);
    >img{
      display: inline-block;
      width: vw(26);
      margin-top:vw(5);
    }
  }
}
.mine-order{
  background-color: #fff;
  .order-title{
    line-height: vw(83);
    border-bottom:1px solid $gray_bg;
    font-size: vw(32);
  }
  .mine-order-list{
    display: flex;
    justify-content: space-around;
    padding:vw(33) 0 vw(25);
    .order-list-item{
      flex:1;
      display: block;
      position: relative;
      text-align: center;
      &:last-child{
        border-left: 1px solid $gray_bg;
      }
      i{
        position: absolute;
        top:vw(-13);
        right:vw(50);
        width: vw(26);
        height: vw(26);
        background-color: #fff;
        border-radius: 50%;
        border: 1px solid $green;
        line-height: vw(26);
        text-align: center;
        font-size: vw(20);
        color: $green;
        font-style: normal;
      }
      img{
        width: vw(52);
        margin:0 auto;
      }
      p{
        margin-top:vw(20);
        font-size: vw(24);
        color: #666;
      }
    }
  }
}
.mine-earnings{
  margin-top:vw(20);
  background-color: #fff;
  .earnings-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: vw(102);
    border-bottom: 1px solid $gray_bg;
    .left-box{
      display: flex;
      align-items: center;
      img{
        width: vw(42);
      }
      p{
        font-size: vw(28);
        margin:0 vw(20) 0 vw(15);
      }
      span{
        font-size: vw(32);
        color: $org_font;
        font-weight: bold;
      }
    }
  }
}
.earnings-list,.bottom-box{
    display: flex;
    flex-wrap: wrap;
    padding:vw(30) 0 0;
    .earnings-list-item{
        width: 25%;
      text-align: center;
      margin-bottom:vw(30);
      &:nth-of-type(4){
        margin-right:0;
      }
      img{
        margin:0 auto;
        width: vw(88);
      }
      p{
        font-size: vw(24);
      }
    }
  }
.bottom-box{
  background-color: #fff;
  margin-top:vw(20);
  margin-bottom:vw(70);
  padding:vw(30) vw(20) 0;
}
.mine-signIn-prop{
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.6);
  .prop-content{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color:#fff;
    border-radius: vw(20);
    width: vw(620);
    height: vw(660);
    padding:vw(50);
    box-sizing: border-box;
    text-align: center;
    img{
      width: vw(274);
      margin:vw(10) auto vw(40);
    }
    p{
      font-size: vw(42);
      line-height: vw(61);
    }
    span{
      font-size: vw(28);
      color: #666;
      line-height: vw(61);
    }
    button{
      width: 100%;
      height: vw(68);
      margin-top:vw(60);
      background: $orgGradientBg;
      border-radius: vw(34);
      color: #fff;
      font-size: vw(30);
    }
    .close{
      position: absolute;
      left:50%;
      bottom:vw(-100);
      transform: translateX(-50%);
    }
  }
}
</style>